<%
  css_bundle :otp_login
  @headers = false
  @body_classes << "full-width modal body--login-confirmation"
  content_for :page_title, t("Multi-factor Authentication Backup Codes")
%>

<% content_for :meta_tags do %>
  <meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=yes,width=device-width">
<% end %>

<div id="modal-box" class="ic-Login-confirmation">
  <div class="ic-Login-confirmation__content">
    <h2 class="ic-Login-confirmation__headline"><%= t "Canvas Multi-factor Authentication Backup Codes" %></h2>

    <p>{{#t}}These backup codes can be used if your multi-factor authentication device is unavailable. Please print them out and keep them in a safe location, like your wallet.{{/t}}</p>
    <ul class="unstyled row-fluid text-center">
      <% 2.times do |i| %>
        <% otps = @otps[@otps.length/2*i..(@otps.length/(2-i) - 1)] %>
        <div class="span6">
          <% otps.each do |otp| %>
            <li<%= " class='used_otp'".html_safe if otp.used? %>><%= otp.code %></li>
          <% end %>
        </div>
      <% end %>
    </ul>
    <a href="<%= destroy_all_one_time_passwords_path %>" class="btn" data-method="delete" id="regenerate_backup_codes_link">{{#t}}Regenerate{{/t}}</a>
  </div>
</div>
